<template>
  <div class="vip-stu-pool-container">
    <div class="table-head-container d-flex align-items-center">
      <span>VIP学员：</span>
      <el-input
        placeholder="请输入VIP学员名称/手机号"
        v-model="search"
        class="sc-container mr-16"
        style="width: 270px"
        clearable
        @keyup.enter.native="getList"
      >
      </el-input>
      <span>成交时间：</span>
      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-button
        type="primary"
        @click="getList"
        icon="el-icon-search"
        style="margin-left: 16px"
        >搜索</el-button
      >
    </div>
    <div class="table-container">
      <div
        class="table-manage-containeer"
        v-if="assignAuth&&selectionList.length > 0 && showSelects"
      >
        <flexbox class="selection-bar">
          <div class="selected—title">
            已选中
            <span class="selected—count">{{ selectionList.length }}</span> 项
          </div>
          <flexbox class="selection-items-box">
            <el-button type="primary" @click="selectionBarClick()" class="d-flex align-items-center justify-content-center all_change"
              >
              <span class="d-flex align-items-center justify-content-center">
                <img src="@/assets/img/crm/all_change.png" style="margin-right:8px" class="all_change_1" />
                <img src="@/assets/img/crm/all_change2.png" style="margin-right:8px" class="all_change_2" />
                <span>批量分配</span>
              </span>
              </el-button
            >
          </flexbox>
        </flexbox>
      </div>
      <ComTable
        :table-data="tableData"
        :loading="loading"
        :columns="poolList"
        :tableHeight="tableHeight"
        :showSelection="assignAuth?true:false"
        @selectionChange="selectionChange"
        ref="table"
      >
        <el-table-column label="操作" width="130" align="center" slot="actions">
          <template slot-scope="scope">
            <el-button type="text" @click="getVipStu(scope.row)"
              >领取</el-button
            >
            <el-button type="text" @click="assignVipStu(scope.row)" v-if="assignAuth"
              >分配</el-button
            >
          </template>
        </el-table-column>
      </ComTable>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 领取-弹框 -->
    <GetsVipStu
      :getDialog="getDialog"
      :rowDatas="rowDatas"
      @submit="getList"
    ></GetsVipStu>
    <!-- 分配-弹框 -->
    <AssignsVipStu
      :assignDialog="assignDialog"
      :title="assigTitle"
      :selectionList="selectionList"
      @submit="getList"
    ></AssignsVipStu>
  </div>
</template>
<script>
import ComTable from "@/components/ComTable/index";
import GetsVipStu from "./components/GetsVipStu";
import AssignsVipStu from "./components/AssignsVipStu";
import Lockr from "lockr";
import { queryPageListForPool } from "@/api/crm/vipStuPool.js";
import PoolMixin from "../../mixins/pool";
export default {
  /**
   * vip池子~
   */
  name: "vipStuPool",
  components: {
    ComTable,
    GetsVipStu,
    AssignsVipStu,
  },
  mixins: [PoolMixin],
  data() {
    return {
      loading: false,
      tableData: [],
      poolList: [
        {
          prop: "customerName",
          label: "学员名称",
        },
        {
          prop: "wechat",
          label: "微信号",
        },
        {
          prop: "telephone",
          label: "手机号",
        },
        {
          prop: "courseSource",
          label: "购买课程",
        },
        {
          prop: "ownerUserName",
          label: "销售负责人",
        },
        // {
        //   prop: "teacherName",
        //   label: "营销讲师",
        // },
        {
          prop: "vipDealTime",
          label: "成交时间",
        },
        {
          slot: "actions",
          label: "操作",
        },
      ],
      getDialog: false,
      assignDialog: false,
      assigTitle: "",
      rowDatas: {},
      tableHeight: document.documentElement.clientHeight - 309, // 表的高度
      //表高度 = 页面高度 - nav75 - padding32- 按钮32 - mb16 - 搜索栏62- mb16-padding32 - 分页44
      showSelects: true,
    };
  },
  created() {
    this.getList();
  },
  computed: {
    // 分配权限
    assignAuth() {
      return this.crm && this.crm.vipPool && this.crm.vipPool.distribution;
    },
  },
  mounted() {
    window.onresize = () => {
      this.updateTableHeight();
    };
  },
  methods: {
    /**
     * 批量分配
     */
    selectionBarClick() {
      this.assigTitle = "批量分配VIP学员";
      this.assignDialog = Date.now();
    },
    /**
     * 领取
     */
    getVipStu(row) {
      this.rowDatas = row;
      this.getDialog = Date.now();
    },
    /**
     * 分配
     */
    assignVipStu(row) {
      this.$refs.table.$refs.comTable.clearSelection();
      this.selectionList = [row];
      this.showSelects = false;
      this.assigTitle = "分配VIP学员";
      this.assignDialog = Date.now();
    },
    /**
     * 批量勾选
     */
    selectionChange(val) {
      this.showSelects = true;
      this.selectionList = val;
      this.updateTableHeight();
    },
    resetList() {
      this.currentPage = 1;
      this.getList();
    },
    /**
     * 获取列表数据
     */
    getList() {
      this.loading = true;
      let params = this.getsParams({
        limit: this.pageSize,
        page: this.currentPage,
      });
      queryPageListForPool(params).then((res) => {
        this.tableData = res.data.list;
        if (
          res.data.totalRow &&
          Math.ceil(res.data.totalRow / this.pageSize) < this.currentPage &&
          this.currentPage > 1
        ) {
          this.currentPage = this.currentPage - 1;
          this.getList();
        } else {
          this.total = res.data.totalRow;
          this.loading = false;
        }
      });
    },
    updateTableHeight() {
      let offsetHei = document.documentElement.clientHeight;
      if (this.selectionList.length > 0 && this.showSelects) {
        this.tableHeight = offsetHei - 309 - 41;
      } else {
        this.tableHeight = offsetHei - 309;
      }
    },
  },
};
</script>
<style scoped lang="scss">
@import "../../styles/selection-bar.scss";
.vip-stu-pool-container {
}
.table-head-container {
  padding: 14px 16px;
  background: white;
  margin-bottom: 16px;
}
.table-container {
  padding: 16px;
  background-color: white;
}
.all_change_2{
  display: none;
}
.all_change:hover .all_change_1{
  display: none;
}
.all_change:hover .all_change_2{
  display: block;
}
</style>